<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三横</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1>div{
            width: 200px;
            height: 10px; 
            background: currentColor;
        }
        .box1>div:nth-child(2){
            margin: 10px 0;
        }
/* 第二种 border*/
        .divz{
            width: 200px;
            border-style:double;
            border-width: 30px 0 30px 0;
            border-color: transparent transparent firebrick transparent;
        }
        .divb{
            width: 200px;
            border: solid;
            border-width: 10px 0 10px 0;
            border-color:transparent transparent firebrick transparent;
        }
/* 第二种 使用一个标签，使用border；；这种方法简单*/
        .boxb{
            margin-top: 30px;
        }
        .divq{
            width: 200px;
            border-top: 30px double hotpink;
            height: 9px;
            border-bottom: 10px solid hotpink;
        }
/* 第三种伪元素 */
        .box3{
            /* display: inline-block; */
            margin-top: 30px;
        }
        .box3::after{
            content: ",";
            display: block;
            height: 10px;
            width: 200px;
            background: gold;
        }
        .box3::before{
            content: ",";
            display: block;
            height: 10px;
            width: 200px;
            background: gold;
        }
        .middle{
            width: 200px;
            height: 10px;
            background: gold;
            margin: 10px 0;
        }
/* 第四种 使用背景裁剪 */
        .box4{
            margin-top: 50px;
        }
        .dn{
            width: 200px;
            height: 10px;
            background: orchid;
            /* padding: 10px 0 ; */
            margin-top: 10px;
            background-clip: content-box;
        }
/* 第四种 使用背景裁剪和边框的配合*/
        .boxj{
            width: 200px;
            height: 10px;
            padding: 10px 0;
            background: yellow;
            border-top: 10px solid;
            border-bottom: 10px solid;
            background-clip: content-box;
        }
        /* 这是针对背景的裁剪，content-box 是只要内容部分；；在本题中之所以会有border，是前面重新设置了border 
        补充裁剪 clip:rect(10px,20px,30px,40px) 并且元素本身有定位,括号中是裁剪的位置;
        */
        .box5{
            width: 500px;
            height: 100px;
            background: orchid;
            position: absolute;
            top: 0px;
            left: 0;
            /* clip:rect(10px, 20px, 30px, 40px); */
            clip: rect(10px, 50px, 30px, 10px);
        }
    </style>
</head>
<body>
    <!-- 第一种 三个div -->
    <div class="box1">
        <div></div>
        <div></div>
        <div></div>
    </div>

    <!-- 第二种 使用border -->
    <div class="box2">
        <div class="divz"></div>
        <div class="divb"></div>
    </div>
    <!-- 第二种 使用一个标签，使用border；这种方法简单 -->
    <div class="boxb">
        <div class="divq"></div>
    </div>

    <!-- 第三种 使用伪元素 -->
    <div class="box3">
        <div class="middle"></div>
    </div>

    <!-- 第四种 使用背景裁剪 -->
    <div class="box4">
        <div class="dn"></div>
        <div class="dn"></div>
        <div class="dn"></div>
    </div>
    <!-- 第四种：使用背景裁剪 -->
    <div class="boxj"></div>
    <!-- 第五种：clip:rect(); -->
    <div class="box5">

    </div>
</body>
</html>